<template>
  <svg class="cursor-pointer" @contextmenu.stop.prevent="checkState">
      <g>
          <g v-if="state == 1">
              <circle cx="6" cy="13" r="5" fill="#FF5B41"/>
              <line x1="6" y1="13" x2="45" y2="13" stroke="#FF5B41" stroke-width="4"></line>
              <circle cx="45" cy="13" r="5" fill="#FF5B41"/>
          </g>
          <g v-else>
              <circle cx="6" cy="13" r="5" fill="#AEFE7B"/>
              <circle cx="45" cy="13" r="5" fill="#AEFE7B"/>
          </g>
      </g>
     <g>
         <text x="100" y="18" font-size="16" fill="#fff">{{info.state_desc}}</text>
     </g>

  </svg>
</template>

<script>
import {submitOperateRecord} from "@/api/api";

export default {
  name: "RuanYaBan",
  props: {
    state:{
      type:Number
    },
      info:{
          type:Object,
          default: function (){
              return {
              }
          }
      }
  },
    methods: {
    checkState() {
        this.desc=this.$store.state.operDescData.find(item=>item.type==='jc'&&item.comType==='压板').desc;
        this.desc=this.desc.replace('jgName',this.info.jg_name).replace('devName',this.info.page_position+"："+this.info.state_desc).replace('state', (Number(this.state) === 0 ? "退出" : "投入"))
        submitOperateRecord( {log_desc:this.desc})
    }
  },
}
</script>

<style scoped>
text{
    font-size: 16px !important;
}
</style>
